/**
 * 入参
 *  资金可用
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Spin } from 'antd';
import { FirstHeaderC, NoDataMaskC } from '../..';
import { connect } from 'dva';
import { fixedNum } from '../../../utils/utils';
import myStyle from './styly/index.less';

class AvailableAssetC extends PureComponent {
  // 默认值
  static defaultProps = {
    onChange: () => {},
    portfolio: undefined, // 组合id
    productGroupId: undefined, // 产品组id
    timeStamp: null,
    loading: false,
    width: '100%',
    hasHeader: true,
    type: undefined,
    hkType: '1', // 默认模式 type：1-代表T+0可用和T+1可用模式（默认值）  2-代表T+1可用（港元和元）和T+2可用（港元和元）模式 3 股指期权指令
    queryModel: 'old', // 查询接口是新new 还是旧old 默认旧
  };

  state = {
    toneFund: '--', // t1
    tzeroFund: '--', // t0
    masking: true, // 是否显示蒙版
    maatApi: false,
    loading: false,
    // 港股通模式
    cnToneFund: '--', // t1（CN）
    hkToneFund: '--', // t1（HK）
    cnTtwoFund: '--', // t2（CN）
    hkTtowFund: '--', // t2（HK）
    // 股指期权指令
    remainingSum: '--',
    occupy: '--',
    available: '--',
  };

  componentDidMount() {
    const { portfolio, productGroupId, hkType } = this.props;
    if (portfolio && productGroupId) {
      // 如果组合id和产品组id都存在
      if (hkType == '1') {
        // 默认模式
        this.props.onChange({ t0: undefined, t1: undefined });
      } else if (hkType == '2') {
        // 港股通模式
        this.props.onChange({
          t1CNY: undefined,
          t1HKD: undefined,
          t2CNY: undefined,
          t2HKD: undefined,
        });
      } else if (hkType == '3') {
        // 股指期权模式
        this.props.onChange({
          remainingSum: undefined,
          occupy: undefined,
          available: undefined,
        });
      }
    } else if (portfolio) {
      this.getAvailableFund(portfolio);
    } else if (productGroupId) {
      this.getDataByProductGroupId(productGroupId);
    } else if (hkType == '1') {
      // 默认模式
      this.props.onChange({ t0: undefined, t1: undefined });
    } else if (hkType == '2') {
      // 港股通模式
      this.props.onChange({
        t1CNY: undefined,
        t1HKD: undefined,
        t2CNY: undefined,
        t2HKD: undefined,
      });
    } else if (hkType == '3') {
      // 股指期权模式
      this.props.onChange({
        remainingSum: undefined,
        occupy: undefined,
        available: undefined,
      });
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { hkType } = this.props;
    if (this.props.portfolio !== nextProps.portfolio || this.props.timeStamp !== nextProps.timeStamp || this.props.productGroupId !== nextProps.productGroupId) {
      if (nextProps.portfolio && nextProps.productGroupId) {
        // 如果组合id和产品组id都存在
        if (hkType == '1') {
          // 默认模式
          this.setState({
            toneFund: '--', // t1
            tzeroFund: '--', // t0
            masking: true,
          });
          this.props.onChange({ t0: undefined, t1: undefined });
        } else if (hkType == '2') {
          // 港股通模式
          this.setState({
            cnToneFund: '--', // t1（CN）
            hkToneFund: '--', // t1（HK）
            cnTtwoFund: '--', // t2（CN）
            hkTtowFund: '--', // t2（HK）
            masking: true,
          });
          this.props.onChange({
            t1CNY: undefined,
            t1HKD: undefined,
            t2CNY: undefined,
            t2HKD: undefined,
          });
        } else if (hkType == '3') {
          // 股指期权
          this.setState({
            remainingSum: '--',
            occupy: '--',
            available: '--',
            masking: true,
          });
          this.props.onChange({ remainingSum: undefined, occupy: undefined, available: undefined });
        }
      } else if (nextProps.portfolio) {
        this.getAvailableFund(nextProps.portfolio);
      } else if (nextProps.productGroupId) {
        this.getDataByProductGroupId(nextProps.productGroupId);
      } else if (hkType == '1') {
        // 默认模式
        this.setState({
          toneFund: '--', // t1
          tzeroFund: '--', // t0
          masking: true,
        });
        this.props.onChange({ t0: undefined, t1: undefined });
      } else if (hkType == '2') {
        // 港股通模式
        this.setState({
          cnToneFund: '--', // t1（CN）
          hkToneFund: '--', // t1（HK）
          cnTtwoFund: '--', // t2（CN）
          hkTtowFund: '--', // t2（HK）
          masking: true,
        });
        this.props.onChange({
          t1CNY: undefined,
          t1HKD: undefined,
          t2CNY: undefined,
          t2HKD: undefined,
        });
      } else if (hkType == '3') {
        // 股指期权
        this.setState({
          remainingSum: '--',
          occupy: '--',
          available: '--',
          masking: true,
        });
        this.props.onChange({ remainingSum: undefined, occupy: undefined, available: undefined });
      }
    }
  }

  // 获取数据
  getAvailableFund = (portfolio) => {
    const { queryModel } = this.props;
    this.setState({
      masking: false,
      loading: true,
    });
    if (queryModel == 'old') {
      this.getAvailableFundOld(portfolio);
    } else {
      // 新接口
      this.getAvailableFundNew(portfolio);
    }
  };

  // 新接口
  getAvailableFundNew = (portfolio) => {
    const { dispatch, hkType } = this.props;
    dispatch({
      type: 'availableAssetM/queryAvailable',
      payload: {
        portfolioCode: portfolio,
        hkType,
      },
      callback: (data) => {
        if (this.props.hkType == '1') {
          // 默认模式
          if (data) {
            const { t0Fund, t1Fund } = data;
            this.props.onChange({ t0: t0Fund, t1: t1Fund });
            this.setState({
              toneFund: t1Fund ?? '--', // 当t0fund 只有为null undefined 才能为--，0也可以展示
              tzeroFund: t0Fund ?? '--',
              loading: false,
            });
          } else {
            this.props.onChange({ t0: undefined, t1: undefined });
            this.setState({
              toneFund: '--',
              tzeroFund: '--',
              loading: false,
            });
          }
        }
      },
    });
  };

  // 原接口
  getAvailableFundOld = (portfolio) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'availableAssetM/getFund',
      payload: {
        nodeId: portfolio,
        maatApi: this.props.maatApi,
        hkType: this.props.hkType,
      },
      callback: (data) => {
        if (this.props.hkType == '1') {
          // 默认模式
          if (data && data.length) {
            const { toneAvailableFund, tzeroAvailableFund } = data[0];
            this.props.onChange({ t0: tzeroAvailableFund, t1: toneAvailableFund });
            this.setState({
              toneFund: toneAvailableFund ?? '--',
              tzeroFund: tzeroAvailableFund ?? '--',
              loading: false,
            });
          } else {
            this.props.onChange({ t0: undefined, t1: undefined });
            this.setState({
              toneFund: '--',
              tzeroFund: '--',
              loading: false,
            });
          }
        } else if (this.props.hkType == '2') {
          // 港股通模式
          if (data && data.length) {
            const { toneCNAvailableFund, toneHKAvailableFund, ttwoCNAvailableFund, ttwoHKAvailableFund } = data[0];
            this.props.onChange({
              t1CNY: toneCNAvailableFund,
              t1HKD: toneHKAvailableFund,
              t2CNY: ttwoCNAvailableFund,
              t2HKD: ttwoHKAvailableFund,
            });
            this.setState({
              cnToneFund: toneCNAvailableFund ? toneCNAvailableFund : '--', // t1（CN）
              hkToneFund: toneHKAvailableFund ? toneHKAvailableFund : '--', // t1（HK）
              cnTtwoFund: ttwoCNAvailableFund ? ttwoCNAvailableFund : '--', // t2（CN）
              hkTtowFund: ttwoHKAvailableFund ? ttwoHKAvailableFund : '--', // t2（HK）
              loading: false,
            });
          } else {
            this.props.onChange({
              t1CNY: undefined,
              t1HKD: undefined,
              t2CNY: undefined,
              t2HKD: undefined,
            });
            this.setState({
              cnToneFund: '--', // t1（CN）
              hkToneFund: '--', // t1（HK）
              cnTtwoFund: '--', // t2（CN）
              hkTtowFund: '--', // t2（HK）
              loading: false,
            });
          }
        } else if (this.props.hkType == '3') {
          // 股指期货
          if (data && Object.keys(data).length) {
            const { remainingSum, occupy, available } = data;
            this.props.onChange({ remainingSum, occupy, available });
            this.setState({
              remainingSum: remainingSum == null || remainingSum == undefined ? '--' : remainingSum,
              occupy: occupy == null || occupy == undefined ? '--' : occupy,
              available: available == null || available == undefined ? '--' : available,
              loading: false,
            });
          } else {
            this.props.onChange({ remainingSum: undefined, occupy: undefined, available: undefined });
            this.setState({
              remainingSum: '--',
              occupy: '--',
              available: '--',
              loading: false,
            });
          }
        }
      },
    });
  };

  // 根据productGroupId（产品组id）获取数据
  getDataByProductGroupId = (productGroupId) => {
    const { dispatch } = this.props;
    this.setState({
      masking: false,
      loading: true,
    });
    dispatch({
      type: 'availableAssetM/getFundByProductGroupId',
      payload: {
        groupId: productGroupId,
      },
      callback: (data) => {
        if (data && JSON.stringify(data) != '{}') {
          this.props.onChange({ t0: data.tzeroAvailableFund, t1: data.toneAvailableFund });
          this.setState({
            toneFund: data.toneAvailableFund ? data.toneAvailableFund : '--',
            tzeroFund: data.tzeroAvailableFund ? data.tzeroAvailableFund : '--',
            loading: false,
          });
        } else {
          this.props.onChange({ t0: undefined, t1: undefined });
          this.setState({
            toneFund: '--',
            tzeroFund: '--',
            loading: false,
          });
        }
      },
    });
  };

  // 千分位数据处理
  thousandsFormat = (number) => {
    return fixedNum(number, 2);
  };

  render() {
    const { width, type, hkType } = this.props;
    const { tzeroFund, toneFund, masking, loading, cnToneFund, hkToneFund, cnTtwoFund, hkTtowFund, remainingSum, occupy, available } = this.state;
    return (
      <div style={{ width }}>
        {this.props.hasHeader ? (
          <div>
            <FirstHeaderC title={'资金'} />
          </div>
        ) : (
          ''
        )}
        <Spin spinning={loading == true}>
          <div className={myStyle.fundsContainer}>
            {hkType == 2 ? (
              // 港股通模式
              <>
                {/* T+1 */}
                <div className={myStyle.showLeft}>
                  <div className={myStyle.availableBox}>
                    <span>T+1可用：</span>
                  </div>
                  <div className={myStyle.hkBox}>
                    <div style={{ marginBottom: '6px' }}>
                      <span className={myStyle.pointFont}>{cnToneFund == '--' ? cnToneFund : this.thousandsFormat(cnToneFund)}</span>
                      <span className={myStyle.weakFont}>CNY</span>
                    </div>
                    <div>
                      <span className={myStyle.pointFont}>{hkToneFund == '--' ? hkToneFund : this.thousandsFormat(hkToneFund)}</span>
                      <span className={myStyle.weakFont}>HKD</span>
                    </div>
                  </div>
                </div>
                {/* T+2 */}
                <div className={myStyle.showRight}>
                  <div className={myStyle.availableBox}>
                    <span>T+2可用：</span>
                  </div>
                  <div className={myStyle.hkBox}>
                    <div style={{ marginBottom: '6px' }}>
                      <span className={myStyle.pointFont}>{cnTtwoFund == '--' ? cnTtwoFund : this.thousandsFormat(cnTtwoFund)}</span>
                      <span className={myStyle.weakFont}>CNY</span>
                    </div>
                    <div>
                      <span className={myStyle.pointFont}>{hkTtowFund == '--' ? hkTtowFund : this.thousandsFormat(hkTtowFund)}</span>
                      <span className={myStyle.weakFont}>HKD</span>
                    </div>
                  </div>
                </div>
              </>
            ) : hkType == 1 ? (
              // 默认模式
              <>
                <div className={myStyle.showLeft} style={{ lineHeight: '40px' }}>
                  <div className={myStyle.availableBox}>
                    <span style={{ paddingRight: 0 }}>T+0可用：</span>
                  </div>
                  <span>{masking ? 'xxxxx' : tzeroFund == '--' ? '--' : this.thousandsFormat(tzeroFund)}</span>
                </div>
                <div className={myStyle.showRight} style={{ lineHeight: '40px' }}>
                  <div className={myStyle.availableBox}>
                    <span style={{ paddingRight: 0 }}>T+1可用：</span>
                  </div>
                  <span>{masking ? 'xxxxx' : toneFund == '--' ? toneFund : this.thousandsFormat(toneFund)}</span>
                </div>
              </>
            ) : hkType == 3 ? (
              <>
                <div className={myStyle.showLeft} style={{ lineHeight: '40px' }}>
                  <div className={myStyle.availableBox}>
                    <span>保证金余额</span>
                  </div>
                  <span>{remainingSum == '--' ? remainingSum : this.thousandsFormat(remainingSum)}</span>
                </div>
                <div className={`${myStyle.showRight} ${myStyle.showLeft}`} style={{ lineHeight: '40px' }}>
                  <div className={myStyle.availableBox}>
                    <span>保证金占用</span>
                  </div>
                  <span>{occupy == '--' ? occupy : this.thousandsFormat(occupy)}</span>
                </div>
                <div className={myStyle.showRight} style={{ lineHeight: '40px' }}>
                  <div className={myStyle.availableBox}>
                    <span>可用保证金</span>
                  </div>
                  <span>{available == '--' ? available : this.thousandsFormat(available)}</span>
                </div>
              </>
            ) : null}
            {masking ? <NoDataMaskC height={'60px'} title={type == '12' ? '请选择相对应的产品组，加载数据！' : '请选择相对应的组合，加载数据！'} /> : null}
          </div>
        </Spin>
      </div>
    );
  }
}

// props默认值
AvailableAssetC.propsTypes = {
  productGroupId: PropTypes.string, // 产品组id
  type: PropTypes.number | PropTypes.string, // 类型，type=12：是根据产品组id获取的资金可用,其他为 根据组合id获取的资金可用
  hkType: PropTypes.number | PropTypes.string, // hkType=1(默认模式：T+0可用和T+1可用模式) hkType=2(港股通模式：T+1可用（港元和元）和T+2可用（港元和元）模式)
  portfolio: PropTypes.string, // 组合id
  onChange: PropTypes.func, // 抛出事件({t0:xx,t1:xx})
  width: PropTypes.string, // 组件宽
  timeStamp: PropTypes.number | PropTypes.string, // 时间戳
  hasHeader: PropTypes.bool, // 标题是否展示
  maatApi: PropTypes.bool, // 正常情况下，在哪个环境下，就访问哪个环境的产品，
  // 但在投资建议书模块中，被引用到资管环境时，该组件的接口仍然要访问maat环境中的产品（而不是资管环境中产品），此时需要在接口前添加maat前缀
};
export default connect(({ availableAssetM, loading }) => ({
  availableAssetM,
  loading,
}))(AvailableAssetC);
